<template>
  <div class="novel-detail-container">
    <!-- 顶部导航 -->
    <!-- 引入顶部导航组件 -->
    <!--    <TopVue />-->


    <!-- 内容主体 -->
    <div class="detail-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-mask">
        <div class="spinner"></div>
        <p>加载中...</p>
      </div>

<!--      &lt;!&ndash; 错误状态 &ndash;&gt;-->
<!--      <div v-else-if="error" class="error-message">-->
<!--        <p>{{ error }}</p>-->
<!--        <button @click="fetchNovelDetail">重试</button>-->
<!--      </div>-->

      <!-- 内容区域：左右分栏 -->
      <div v-else class="content-wrapper">
        <!-- 左侧：封面 + 文案 + 简介 -->
        <div class="left-section">
          <div class="cover">
            <!-- 动态图片：优先用接口数据，无数据时用默认图 -->
            <img :src="require('@/assets/img/'+story.storyimg)" alt="小说封面" class="novel_cover-img" />
            <!--            <img -->
            <!--&lt;!&ndash;                :src="novelDetail.coverUrl ? novelDetail.coverUrl : '@/assets/img/novel_cover.png'"&ndash;&gt;-->
            <!--                    -->
            <!--                    alt="小说封面"-->
            <!--            >-->
          </div>
          <div class="copywriting">
            <h3 class="title">{{ novelDetail.name }}</h3>
            <p class="author">作者：{{ novelDetail.author }}</p>
            <h4>【文案】</h4>
            <p class="copywriting-text" v-html="novelDetail.copywriting || '暂无文案'"></p>
          </div>
        </div>

        <!-- 右侧：作品信息 + 霸王票等 -->
        <div class="right-section">
          <div class="work-info">
            <h3 class="work-info-title">文章基本信息</h3>
            <p><span class="label">文章类型：</span>{{ novelDetail.type || '-' }}</p>
            <p><span class="label">作品视角：</span>{{ novelDetail.perspective || '-' }}</p>
            <p><span class="label">所属系列：</span>{{ novelDetail.series || '-' }}</p>
            <p><span class="label">文章进度：</span>{{ novelDetail.progress || '-' }}</p>
            <p><span class="label">全文字数：</span>{{ novelDetail.wordCount || 0 }}字</p>
            <p><span class="label">授权项目：</span>{{ novelDetail.authorization || '-' }}</p>
            <p><span class="label">版权状态：</span>{{ novelDetail.copyrightStatus || '-' }}</p>
            <p><span class="label">签约状态：</span>{{ novelDetail.contractStatus || '-' }}</p>
            <p><span class="label">勤奋指数：</span>
              <span v-for="i in 5" :key="i" class="star">
                {{ i <= (novelDetail.diligenceIndex || 0) ? '★' : '☆' }}
              </span>
            </p>
            <p class="age-tip" v-if="novelDetail.ageRestriction">
              本文作者建议{{ novelDetail.ageRestriction }}以上读者观看。
            </p>
          </div>

          <div class="ranking-info">
            <p v-if="novelDetail.ranking">
              当前霸王票全站排行<b>{{ novelDetail.ranking }}</b>，
              还差<b>{{ novelDetail.rankingGap || 0 }}</b>枚地雷就可以前进一名
            </p>
            <div class="ranking-list">
              <p v-for="(rank, index) in novelDetail.topReaders || []" :key="index">
                <span class="rank-num">{{ index + 1 }}.</span>
                <span class="rank-name">{{ rank.name || '-' }}</span>
                {{ rank.title || '-' }}
              </p>
            </div>
            <p class="more-ranking" v-if="novelDetail.ranking">
              <a href="#">[更多排行]</a>
              <a href="#">[等级说明]</a>
            </p>
            <p class="qr-code-tip">支持手机扫描二维码阅读</p>
            <div class="qr-code">
              <!-- 动态图片：优先用接口数据，无数据时用默认图 -->
              <img src="@/assets/img/qr_code.png" alt="小说阅读二维码" class="qr_code-img" />
              <!--              <img-->
              <!--                  :src="novelDetail.qrCodeUrl ? novelDetail.qrCodeUrl : '@/assets/img/qr_code.png'"-->
              <!--                  alt="小说阅读二维码"-->
              <!--              >-->
              <p v-if="novelDetail.mobileUrl">
                wap阅读点击：<a :href="novelDetail.mobileUrl">{{ novelDetail.mobileUrl }}</a>
              </p>
              <p>打开晋江App扫描即可阅读</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/utils/request';
import {ElMessage, ElMessageBox} from 'element-plus';
import {router} from "@/router/router";
import {require} from "@/utils/getFileUrl"
import {useUserStore} from "@/stores/useUserStore";

// 获取路由参数
const route = useRoute();

// // 状态管理
// const loading = ref(true);
// const error = ref('');

const story = JSON.parse(<string>router.currentRoute.value.query.story)
// 状态管理（模拟数据）
const novelDetail = ref({
  id: 1,
  name: story.name,
  author: story.author,
  coverUrl: '', // 这里留空，模拟接口无数据时显示默认图
  copywriting: story.introduce,
  briefIntro: '不期年年有今日，惟愿岁岁有今朝',
  creationIntent: '立足朝堂，不改初心',
  type: story.storytype,
  perspective: '女主',
  series: '朝堂文两篇 之一',
  progress: '连载',
  wordCount: 410847,
  authorization: '尚未出版（联系出版）',
  copyrightStatus: '已签约',
  contractStatus: '已签约',
  diligenceIndex: 5,
  ageRestriction: '18',
  ranking: 4584,
  rankingGap: 2,
  topReaders: [
    { name: 'RosemaryJad', title: '超级霸王' },
    { name: 'zzzz', title: '小霸王' },
    { name: '相逢意气为君', title: '小霸王' },
    { name: '几多', title: '终极霸王' },
    { name: '莉兹', title: '终极霸王' },
  ],
  qrCodeUrl: '', // 留空，模拟接口无数据时显示默认图
  mobileUrl: 'https://example.com/mobile',
  tags: ['穿越时空', '女扮男装', '朝堂', '正剧', '群像']
});

// 计算属性：格式化当前时间
const currentTime = computed(() => {
  const now = new Date();
  return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
});

// // 获取小说详情
// const fetchNovelDetail = async () => {
//   loading.value = true;
//   error.value = '';
//
//   try {
//     const novelId = Number(route.query.id);
//     if (!novelId) {
//       throw new Error('未找到小说ID');
//     }
//
//     // 模拟接口返回数据（实际项目中替换为真实接口请求）
//     const mockData = {
//       ...novelDetail.value,
//       // 这里可以模拟返回图片路径（实际项目中从接口获取）
//       // coverUrl: '/api/images/novel123.jpg', // 示例：真实接口返回的图片路径
//       // qrCodeUrl: '/api/qrcode/novel123.png'
//     };
//     novelDetail.value = mockData;
//
//   } catch (err: any) {
//     error.value = err.message || '获取小说详情失败';
//     ElMessage.error(error.value);
//   } finally {
//     loading.value = false;
//   }
// };
//
// // 监听路由变化，重新加载数据
// watch(() => route.query.id, () => {
//   fetchNovelDetail();
// });
//
// // 生命周期钩子
// onMounted(() => {
//   fetchNovelDetail();
// });

// 导航函数
const navigateTo = (path: string) => {
  ElMessage.info(`导航到${path}页面，功能待完善`);
};

// 用户操作函数
const handleLogin = () => {
  ElMessage.info('登录功能待完善');
};

const handleRegister = () => {
  ElMessage.info('注册功能待完善');
};

const handleFindAccount = () => {
  ElMessage.info('找回账号功能待完善');
};
const handleFindPassword = () => {
  ElMessage.info('找回密码功能待完善');
};
//导航到novelList界面
function goTonovelList(){
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import "@/assets/css/details.css";

/* 补充横幅广告样式（如果需要） */
.banner-img {
  width: 100%;
  height: auto;
  margin: 10px 0;
}
</style>
